define([], function() {
    class jp {
        constructor() {}
        init() {
            //渲染
            $.ajax({
                url: 'http://localhost/juanpi/php/juanpidata.php',
                dataType: 'json'
            }).done(function(data) {
                let str = '';
                $.each(data, function(index, value) {
                    // console.log(value)
                    str += `
                        <a href='http://localhost/juanpi/src/details.html?sid=${value.sid}'>
                        <img class="lazy" data-original="${value.url}" alt="" width="220" height="220">
                        <p class="money"><span class="discount">￥${value.presentprice}</span><span class=" originalCost">￥${value.originalprice}</span></p>
                        <p class="commBottom"><span class="commTitle">${value.subtitle}</span><span class="time">上新</span></p>
                    </a>
                        `
                });
                $('#comm').html(str)
                    //懒加载
                $(function() {
                    $("img.lazy").lazyload({ effect: "fadeIn" });
                });
            });
            // 分页
            $('.page').pagination({
                pageCount: 2,
                jump: true,
                prevContent: '上一页',
                nextContent: '下一页',
                callback: function(pagenum) {
                    $.ajax({
                        url: 'http://localhost/juanpi/php/juanpidata.php',
                        data: {
                            page: pagenum.getCurrent()
                        },
                        dataType: 'json'
                    }).done(function(data) {
                        // alert(1);
                        let str = '';
                        $.each(data, function(index, value) {
                            // console.log(value)
                            str += `
                                     <a href='http://localhost/juanpi/src/details.html?sid=${value.sid}'>
                                         <img class="lazy" data-original="${value.url}" alt=""   width="220" height="220">
                                         <p class="money"><span class="discount">￥${value.   presentprice}</span><span class=" originalCost">￥${value.  originalprice}</span></p>
                                        <p class="commBottom"><span class="commTitle">${value.  subtitle}</span><span class="time">上新</span></p>
                                    </a>
                                    `
                        });
                        $('#comm').html(str);
                        //懒加载
                        $(function() {
                            $("img.lazy").lazyload({ effect: "fadeIn" });
                        });
                    });
                }
            });
            // ---------------------------------------------------
            //固定悬浮导航

            if ($(window).scrollTop() > 250) {
                $('.fixedNav').css({ 'display': 'block' })
            } else {
                $('.fixedNav').css({ 'display': 'none' })
            }
            $(window).on('scroll', function() {
                if ($(window).scrollTop() > 250) {
                    $('.fixedNav').css({ 'display': 'block' })
                } else {
                    $('.fixedNav').css({ 'display': 'none' })
                }
            })

            ;
            //轮播图

            let img = $('.slideshow ul li');
            let circle = $('.slideshow ol li');
            let index = 0;
            let slideshow = $('.slideshow');
            // console.log(circle)
            circle.on('mouseover', function() {
                index = $(this).index();
                switchover()

            });
            $('.slideshowRight').on('click', function() {
                index++
                if (index > 2) {
                    index = 0
                }
                switchover()
            })
            $('.slideshowLeft').on('click', function() {
                index--
                if (index < 0) {
                    index = 2
                }
                switchover()
            })
            let timer = setInterval(() => {
                $('.slideshowRight').click()
            }, 2000);
            slideshow.hover(function() {
                clearInterval(timer)
            }, function() {
                timer = setInterval(() => {
                    $('.slideshowRight').click()
                }, 2500);
            })

            function switchover() {
                circle.eq(index).addClass('act').siblings('.slideshow ol li').removeClass('act');
                img.eq(index).stop(true).animate({ opacity: 1 }).siblings('ul li').stop(true).animate({ opacity: 0 });
            };
            //右侧导航栏hover效果

            $('.rightNavTop .icon-gerenyonghutouxiang2').hover(function() {
                // console.log(1)
                // $('.rightNavTop .denglu').css({ 'opacity': '1' });
                // $('.rightNavTop .denglu').stop(true).animate({ left: -150 + 'px' })
                moves($('.rightNavTop .denglu'), -150, 1);
            }, function() {
                // $('.rightNavTop .denglu').css({ 'opacity': '0' });
                // $('.rightNavTop .denglu').stop(true).animate({ left: -170 + 'px' })
                moves($('.rightNavTop .denglu'), -170, 0);
            })
            $('.rightNavTop .icon-shoucang').hover(function() {
                // alert(1)
                moves($('.rightNavTop .shoucang'), -100, 1);
            }, function() {
                moves($('.rightNavTop .shoucang'), -150, 0);
            });
            $('.rightNavTop .icon-wodeyouhuijuan').hover(function() {
                // alert(1)
                moves($('.rightNavTop .youhui'), -100, 1);
            }, function() {
                moves($('.rightNavTop .youhui'), -150, 0);
            });

            function moves(name, location, lucency) { //需要加效果的元素名，位移距离*
                name.css({ 'opacity': '' + lucency + '' });
                name.stop(true).animate({ left: location + 'px' })
            };
        }
    };
    return {
        jp: jp
    }
});